<script>
import {
  readWarn
} from '@/api/bigScreen.js';
export default {
  name: "Warn",
  props: {
    warnList: {
      type: Array,
      default: () => [],
    },
  },
  computed: {
    total() {
      return this.warnList?.length ?? 0;
    },
  },
  methods: {
    async onJumpWarn(item) {
      if (!item) return false;
      const { type, toId, message,areaId } = item;
      await readWarn({ message,toId,type });
      const typeOptions = {
        0: 'employees',
        1: 'cars',
        2: 'platforms',
        3: 'bucketsIcon',
      };
      const typeName = typeOptions?.[type];
      if (!typeName) return this.$message.error('未配置的类型');
      this.$bus.$emit('jumpWarn', { areaId,toId,typeName });
    },
  },
}
</script>

<template>
  <el-dropdown trigger="click" @command="onJumpWarn">
    <el-badge :value="total" :hidden="!total">
      <i class="el-icon-bell" style="font-size: 30px;color:#ff9100;cursor: pointer;"></i>
    </el-badge>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item v-for="item in warnList" :key="item.id" :command="item">{{ item.messageValue }}</el-dropdown-item>
      <el-dropdown-item v-if="!total">暂无警告</el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<style scoped lang="scss">

</style>
